<template>
    <div class="infinite-container">
        <div class="lefttime"><span>状态:待收货</span></div>
        <left-border-title :title="'配送信息'"></left-border-title>
        <div class="fcon">
            <ul>
                <li>
                    <div>取药方式 </div>
                    <div>物流配送</div>
                </li>
                <li>
                    <div>收货人 </div>
                    <div>章柳希 13690908909 </div>
                </li>
                <li>
                    <div>收货地址 </div>
                    <div>浙江 杭州市滨江区越达巷291号</div>
                </li>
            </ul>
        </div>
        <div class="mt10"></div>
        <left-border-title :title="'药品信息'"></left-border-title>
        <div class="item-con">
            <div>
                <div class="item-left">
                    <div>复方氨肽口服液 </div>
                    <div>10ml*10支 </div>
                </div>
                <div class="item-right">￥50.00×3</div>
            </div>
            <div>
                <div class="item-left">
                    <div>复方氨肽口服液 </div>
                    <div>10ml*10支 </div>
                </div>
                <div class="item-right">￥50.00×3</div>
            </div>
            <div class="con-bottom">
                <ul>
                    <li>
                        <div>药品总额 </div>
                        <div>￥10.00</div>
                    </li>
                    <li>
                        <div>代煎费 </div>
                        <div>￥10.00</div>
                    </li>
                    <li>
                        <div>运费 </div>
                        <div>￥10.00</div>
                    </li>
                </ul>
            </div>
        </div>
        <div class="item-footer">
            <div>
                <div></div>
                <div>
                </div>
                <div>
                    <span></span>
                    <span>合计:</span>
                    <span>￥50</span>
                </div>
            </div>
        </div>
        <div class="mt10"></div>
         <div class="fcon">
            <ul>
                <li>
                    <div>支付方式 </div>
                    <div>在线支付</div>
                </li>
                <li>
                    <div>订单号 </div>
                    <div>1549090399400000034</div>
                </li>
                <li>
                    <div>下单时间 </div>
                    <div>2018-07-25 15:22:00</div>
                </li>
                <li>
                    <div>付款时间 </div>
                    <div>2018-07-25 15:23:00</div>
                </li>
            </ul>
        </div>
        <div class="lcon">
            <mu-raised-button label="查看物流" fullWidth primary></mu-raised-button>
        </div>
    </div>
</template>

<script>
    import leftBorderTitle from '../../components/leftBorderTitle.vue'
    export default {
        data() {
            return {}
        },
        components: {
            leftBorderTitle
        },
        methods: {
    
        },
        mounted() {
    
        }
    }
</script>

<style lang="less" scoped>
    @import "../../common/css/flex.css";
    @import '../../common/css/component';
    .infinite-container {
        padding-bottom: 30px;
        @{deep} .mu-item-left img {
            width: 30px;
            height: 30px;
        }
        @{deep} .mu-item.show-left {
            padding-left: 60px;
        }
        @{deep} .mu-item-title {
            color: #666;
        }
        @{deep} .mu-item-right {
            color: #333;
        }
        @{deep} .mu-item {
            min-height: 44px;
        }
        .feeText {
            color: #0fc47d;
        }
        .lefttime {
            width: 100%;
            height: 35px;
            line-height: 35px;
            text-align: center;
            font-size: 14px;
            color: #ff6600;
            background: #fffdce;
            border-bottom: 1px solid #e8e8e8;
        }
        .lcon {
            width: 100%;
            padding-top: 10px;
            text-align: center;
            @{deep}.mu-raised-button {
                width: 80%;
                height: 44px;
                margin-top: 20px;
            }
            @{deep}.mu-raised-button-secondary {
                color: #f24242;
                border: 1px solid #f24242;
                background: #fff1f1;
            }
        }
        .fcon {
            padding: 15px;
            background: #fff;
            border-top: 1px solid #e8e8e8;
            >ul {
                >li+li {
                    margin-top: 5px;
                }
                >li {
                    display: table;
                    >div {
                        display: table-cell;
                        font-size: 14px;
                    }
                    >div:first-child {
                        color: #666;
                        width: 5em;
                        white-space: nowrap;
                        padding-right: 15px;
                    }
                    >div:last-child {
                        color: #333;
                    }
                }
            }
        }
        .con-bottom {
            padding: 15px 0px;
            background: #fff;
            border-top: 1px solid #e8e8e8;
            >ul {
                width:100%;
                >li+li {
                    margin-top: 5px;
                }
                >li {
                    display: table;
                width:100%;
                    >div {
                        display: table-cell;
                        font-size: 14px;
                    }
                    >div:first-child {
                        color: #666;
                        width: 5em;
                        white-space: nowrap;
                        padding-right: 15px;
                    }
                    >div:last-child {
                        text-align:right;
                        color: #333;
                    }
                }
            }
        }
        .item-con {
            border-bottom: 1px solid #e8e8e8;
            border-top: 1px solid #e8e8e8;
            background: #fff;
            padding: 15px 15px 0px 15px;
            font-size: 14px;
            color: #333;
            >div+div {
                margin-top: 10px;
            }
            >div {
                width: 100%;
                position: relative;
                display: table;
                >div {
                    display: table-cell;
                }
            }
        }
        .item-footer {
            width: 100%;
            padding-left: 15px;
            overflow: hidden;
            background: #fff;
            border-bottom: 1px solid #efefef;
            img {
                width: 14px;
                height: 14px;
            }
            >div {
                width: 100%;
                height: 40px;
                display: table;
                font-size: 14px;
                >div {
                    display: table-cell;
                    vertical-align: middle;
                }
                >div:first-child {
                    line-height: 0;
                }
                >div:nth-child(3) {
                    padding-right: 15px;
                    text-align: right;
                    color: #ff6600;
                    >span:first-child {
                        color: #666;
                    }
                }
                >div:nth-child(4) {
                    width: 75px;
                    padding-right: 15px;
                    text-align: right;
                    white-space: nowrap;
                }
            }
        }
        .item-right {
            text-align: right;
            white-space: nowrap;
        }
        .item-left {
            >div:nth-child(2) {
                color: #999;
            }
        }
    }
</style>